Lab Assignment 5
Due date : September 10, 12 PM EST
Total Marks : 42
Today’s Exercise
Topics |
Lab Exercises |
Points |
Introduction to HTML |
|
|
Drawing Shapes |
|
|
Important Note:
· Work with your partner collaboratively.
· Work on one computer only.
· Only one partner should upload all assignment files. The other partner will upload only the declaration form.
· Make sure that these two programs compile and run without any error. A program with compiler or runtime error will receive no credit.
Introduction to HTML
HTML is the HyperText Markup Language. It is used to describe how text, images, and multimedia are displayed by Web browsers. In this lab you will learn a little about HTML so that you can create a web page containing headings, interesting fonts, lists, and links as well as applets.
HTML uses tags to describe the layout of a document; the browser then uses these tags to figure out how to display the document. Tags are enclosed in angle brackets. For example, <title> is a tag that indicates that this section contains the title of the document. Many tags, including <title>, have corresponding end tags that indicate where the section ends. The end tags look just like the start tags except that they start with the character /, e.g., </title>. For more information, visit http://werbach.com/barebones/barebones.html .
The following text indicates that the title of the document is Introduction to HTML:
<title>Introduction to HTML</title>
There are a few tags that almost every document will have: <html>, <head>, <title>, and <body>. Here is an example of a simple HTML document:
<HTML>
<HEAD>
<TITLE>Introduction to HTML</TITLE>
</HEAD>
<BODY>
In this lab you will learn about HTML, which is lots of fun
to use. In particular, you will learn how to use fonts,
paragraphs, lists, links and applets in a web page. Now you
can make your own web page for your friends to visit!
</BODY>
</HTML>
To see what this looks like, open the file in the web browser. Change the size of the browser window (click and drag any corner) and see how the text is reformatted as the window changes. Note that the title appears on the window, not as part of the document.
The HEAD of a document (everything between <HEAD> and </HEAD>) contains the introduction to the document. The title goes in the head, but for now we won't use the head for anything else. The BODY of a document (everything between <BODY> and </BODY>) contains everything that will be displayed as part of the document. Both the HEAD and the BODY are enclosed by the HTML tags, which begin and end the document.
This document contains only plain text, but an HTML document can have much more structure: headings, paragraphs, lists, bold and italic text, images, links, tables, and so on. Here is a document containing a heading, two paragraphs, and some fancy font.
<HTML>
<HEAD>
<TITLE>Introduction to HTML</TITLE>
</HEAD>
<BODY BGCOLOR="lightgreen">
<H1 align="center">Introduction to HTML</H1>
<P>In this lab you will learn about <I>HTML</I>, which
is lots of fun
to use. In particular, you will learn how to use fonts,
paragraphs, lists, links, and colors in a web page. Now you
can make your <B>own</B> web page for your friends to visit!</P>
<P>Later in this lab you will do some fancier stuff with
applets and graphics and include an applet on your web page.
Can't you just feel the job offers start rolling in?</P>
<U>Yippee!</U>
</BODY>
</HTML>
Run the HTML document to see what this looks like in the browser.
In this document the <H1> tag creates a level 1 heading. This is the biggest heading; it might be used at the beginning of the document or the start of a new chapter. Level 2 through level 6 headings are also available with the <H2> through <H6> tags.
The <P> tag creates a new paragraph. Most browsers leave a blank line between paragraphs. The <B> tag creates bold text, the <I> tag creates italic text, and the <U> tag creates underlined text. Note that each of these tags is closed with the corresponding end tag. The BGCOLOR attribute on the BODY tag sets the background color.
Note that line breaks and blank lines in the HTML document do not matter—the browser will format paragraphs to fit the window. If it weren't for the <P> tag, the blank line between the paragraphs in this document would not show up in the displayed document.
------------------------------------------------------------------------
Exercise #1: Open a new file called MyPage.html. Write a simple web page about yourself. Your page should contain at least the following:
When you are done, view your document from the browser. Just type in the URL, don't use File | Open Page.
------------------------------------------------------------------------
Lists We often want to add a list to a document. HTML provides two kinds of lists, ordered (e.g., 1, 2, 3) and unordered (e.g., bulleted). A list is introduced with the <OL> or <UL> tag, depending on whether it is ordered or unordered. Each list item is introduced with a <LI> tag and ended with the </LI> tag. The entire list is then ended with </OL> or </UL>, as appropriate. For example, the code below creates the list shown; replacing the <OL> and </OL> tags with <UL> and </UL> would produce the same list with bullets instead of numbers.
Things I like:
<OL>
<LI>chocolate
<LI>rabbits
<LI>chocolate rabbits
</OL>
Things I like:
------------------------------------------------------------------------
Exercise #2: In the first paragraph, add a list of all courses that you taking in Fall, 2006.
------------------------------------------------------------------------
Links Links connect one document to another. Links are created in HTML with the <A> (anchor) tag. When creating a link you have to specify two things:
· The URL of the document to go to when the link is clicked. This is given as the HREF attribute of the A element.
· How the link should be displayed (that is, what text or image to click on to go to the linked document). This appears between the <A> and </A> tags.
For example, the code below creates the link shown, which goes to a page about the history of computing:
Learn more about <A HREF="http://csc.columbusstate.edu>the department of Computer Science in Columbus State University</A>
Learn more about the history of computing.
------------------------------------------------------------------------
Exercise #3: Add the links of Columbus State University and the webpage of your major department in appropriate places.
------------------------------------------------------------------------
Drawing Shapes
The following is a simple applet that draws a blue rectangle on a yellow background.
// ****************************************************************
// Shapes.java
//
// The program will draw two filled rectangles and a
// filled oval.
// ****************************************************************
import javax.swing.JApplet;
import java.awt.*;
public class Shapes extends JApplet
{
public void paint (Graphics page)
{
// Declare size constants
final int MAX_SIZE = 300;
final int PAGE_WIDTH = 600;
final int PAGE_HEIGHT = 400;
// Declare variables
int x, y; // x and y coordinates of upper left-corner of each shape
int width, height; // width and height of each shape
// Set the background color
setBackground (Color.yellow);
// Set the color for the next shape to be drawn
page.setColor (Color.blue);
// Assign the corner point and width and height
x = 200;
y = 150;
width = 100;
height = 70;
// Draw the rectangle
page.fillRect(x, y, width, height);
}
}
Study the code, noting the following:
<html>
<applet code="Shapes.class" width=600 height=400>
</applet>
</html>
Save the files Shapes.java and Shapes.html to your directory. Now do the following:
1. Compile Shapes.java, but don't run it—this is an applet, so it is run through a browser or a special program called the Applet Viewer.
2. Run the program through your browser. You should see a blue rectangle on a yellow background.
3. Now run the program through the Applet Viewer by typing the command
appletviewer Shapes.html
You should see a new window open displaying the rectangle.
4. Now open the program in your text editor and change the x and y variables both to 0. Save and recompile the program, then view it in the Applet Viewer (this is generally less trouble when making lots of changes than using the browser). What happened to the rectangle?
5. Now change the width to 200 and the height to 300. Save, recompile and run to see how this affects the rectangle.
6. Change x to 400, y to 40, width to 50 and height to 200. Test the program to see the effect.
7. Modify the program so that it draws four rectangles in all, as follows:
· One rectangle should be entirely contained in another rectangle.
· One rectangle should overlap one of the first two but not be entirely inside of it.
· The fourth rectangle should not overlap any of the others.
8. One last touch to the program ... Change the colors for at least three of the shapes so the background and each of the three shapes are different colors (a list of colors is in Figure 2.10 of the text). Also change two of the fillRect methods to fillOval so the final program draws two rectangles and two ovals. Be sure that the overlap rules are still met.
Submit the following files:
· MyPage.html (the final version)
· Shapes.java (the final version)
· Shapes.html (the final version)